<template>
    <qly-base-page ref="skyBasePageRef" show-bg-image>
        <template #navbar>
            <qly-nav-bar :title="$t('common.switchLanguages')" backgroundColor="rgba(0,0,0,0)"></qly-nav-bar>
        </template>
        <view class="main-box">
            <view class="main">
                <view v-for="(item, index) in langList" :key="index" class="item" @click="langSwitch(item)">
                    <text>{{ $t(item.name) }}</text>
                    <up-icon v-if="item.value === currLang" name="checkbox-mark" size="24"></up-icon>
                </view>
            </view>
        </view>
    </qly-base-page>
</template>

<script setup>
import storage from '@/qly/storage'
import setting from '@/qly/setting'
import i18n from '@/locales'

// 解构出t方法
const {t} = useI18n()

const langList = [
    {
        name: '简体中文',
        value: 'zh_CN',
    },
    {
        name: 'English',
        value: 'en_US',
    }
]

const currLang = ref('zh_CN')

onLoad(() => {
    console.log('i18n.global',i18n.global)
    currLang.value = storage.get(setting.LS_APP_LANG) || 'zh_CN'
    console.log('currLang.value',currLang.value)
})

// 切换语言
const langSwitch = async (item) => {
    if (item.value === currLang.value) {
        return
    }
    
    i18n.global.locale = item.value
    uni.setLocale(item.value == 'en_US' ? 'en' : 'zh-Hans')
    storage.set(setting.LS_APP_LANG, item.value)
    currLang.value = item.value
    
}
</script>

<style scoped>
.main-box{
    padding: 24rpx 30rpx 26rpx 30rpx;
}
.main {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border-radius: 32rpx;
    
}

.main .item {
    margin-left: 30rpx;
    margin-right: 14rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 108rpx;
    border-bottom: 1rpx solid #EEEEEE;
}

.main .item:last-child {
    border-bottom: none;
}
</style>
